<template>
    <Card :bordered="false" dis-hover>
        <jgsearch :searchData="searchData"
                  @on-change-changetag="changetag"
                  @on-enter-inputwx="askDatasearchwx"
                  @on-clear-inputwx="askData"
                  @on-enter-inputhz="askDatasearchhz"
                  @on-clear-inputhz="askData"
                  @on-change-change="askData">
            <template v-slot:check>
                <Row type="flex">
                    <Col><Checkbox  @on-change="askData" v-model="params.is_attention">我的关注</Checkbox></Col>
                    <!-- <Col><Checkbox  @on-change="askData" v-model="params.have_mobile">电话</Checkbox></Col>
                    <Col><Checkbox  @on-change="askData" v-model="params.have_wechat">微信</Checkbox></Col> -->
                    <Col><Checkbox  @on-change="askData" v-model="params.have_repeat">重复</Checkbox></Col>
                </Row>
            </template>
            <template v-slot:tag>
                <tags @sunchangetag="sunchangetag" :tags_ids="params.tags_ids" :project_tags_ids="params.project_tags_ids"></tags>
            </template>
            <template v-slot:city>
                <jgcheckcity ref="checkcity" @cityvalue="cityvalue" :value="area_code" :name="`diseases${month_type}`"></jgcheckcity>
            </template>
        </jgsearch>
        <div class="i-table-no-border">
            <Table highlight-row :max-height="635" ref="table" :columns="columns" :data="list" :loading="loading"
                   size="small" @on-sort-change="sortchange"
                   @on-filter-change="handleFilterChange">
                <template slot-scope="{ row }" slot="info">
                    <a @click="handleDetailPatient(row)"
                    ><Icon
                        type="ios-water"
                        v-if="+row.is_share === 1"
                    ></Icon>{{ row.true_name || row.user_name }}
                        {{ row.gender_str }} {{ row.age }}</a
                        >
                </template>
                <template slot-scope="{ row }" slot="state">
                    <Tag v-if="row.status_name === '失效'" color="blue">{{
                        row.status_name
                    }}</Tag>
                    <Tag v-else-if="row.status_name === '跟进中'" color="volcano">{{ row.status_name }}</Tag>
                    <Tag v-else-if="row.status_name === '预约'" color="cyan">{{
                        row.status_name
                    }}</Tag>
                    <Tag v-else-if="row.status_name === '到诊'" color="green">{{
                        row.status_name
                    }}</Tag>
                    <Tag v-else-if="row.status_name === '已到老患者'" color="orange">{{ row.status_name }}</Tag>
                    <Tag v-else-if="row.status_name" color="orange">{{
                        row.status_name
                    }}</Tag>
                </template>
                <template slot-scope="{ row }" slot="label">
                    <Poptip
                        word-wrap
                        trigger="hover"
                        placement="right"
                        width="400"
                    >
                        <template v-for="(item, index) in row.tags_name">
                            <Tag v-show="index<3" :color="item.type==1?'warning':'primary'" :key="index">{{ item.tags_name.replace(/[\r\n]/g, "") }}</Tag>
                        </template>
                        <div slot="content">
                            <template v-for="(item, index) in row.tags_name">
                                <Tag :color="item.type==1?'warning':'primary'" :key="index">{{ item.tags_name.replace(/[\r\n]/g, "") }}</Tag>
                            </template>
                        </div>
                    </Poptip>
                </template>
                <template slot-scope="{ row }" slot="body_parts">
                    <Poptip word-wrap trigger="hover" placement="right" maxWidth="400">
                        <Tag color="default" v-for="(item, index) in row.body_parts" :key="index" v-if="index < 3">{{
                        item }}</Tag>
                        <div slot="content">
                            <Tag v-for="(item, index) in row.body_parts" :key="index">{{ item }}</Tag>
                        </div>
                    </Poptip>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <a v-hasC="{
                        name: 'patient-index-edit-info1',
                        flag: 'v1/patient/index/edit-info',
                    }" @click="handleOpenDrawer(row)">编辑</a>
                    <Divider type="vertical" v-if="+row.repeat_type > 0" v-hasC="{
                        name: 'patient-index-edit-info1',
                        flag: 'v1/patient/index/edit-info',
                    }" ></Divider>
                    <a @click="copypatient(row)"
                       v-hasC="{
                           name: 'v1-patient-index-repeat-list',
                           flag: 'v1/patient/index/repeat-list',
                       }"
                       v-if="+row.repeat_type > 0"
                    >重复</a>
                    <Divider
                        type="vertical"
                        v-if="+row.is_delete === 1"
                        v-hasC="btnShows"
                    ></Divider>
                    <a
                        @click="delpatient(row)"
                        v-if="+row.is_delete === 1"
                        v-hasC="btnShows"
                        style="color: red;"
                    >删除</a
                    >
                </template>
                <template slot-scope="{ row, index }" slot="realname">
                    <p v-if="row.patient_data_type == 0">{{row.realname}}</p>
                </template>
                <template slot="footer" v-if="total>=0">
                    <Page
                        show-total show-elevator
                        show-sizer transfer
                        :total="total"
                        :current.sync="params.page"
                        :page-size="params.pageSize"
                        :page-size-opts="pageOpts"
                        @on-change="changepage"
                        @on-page-size-change="changepageSize"
                        style="text-align: center;"
                    ></Page>
                </template>
            </Table>
        </div>
        <patient-detail ref="patientDetail" :btnShow="btnShow" @cancelDrawer="askData" @askData="askData" ></patient-detail>
        <edit-patient ref="editPatient" @patientfun="askData" v-if="!loading" ></edit-patient>
        <copymodal ref="copymodal" @askData="askData" :btnShow="btnShows" ></copymodal>
    </Card>
</template>
<script>
    import { patientindexdiseasesuserlist, patientindextabtotal, patientindexsearchcity, patientindexdelete, customerwechattagslist } from '@/api/hqapi';
    import jgsearch from '@/components/search';
    // import jgcheckcity from '@/components/checkcity';
    import patientDetail from '@/components/patientDetail';
    import editPatient from '@/components/editPatient';
    import copymodal from '@/pages/patient/copymodal';
    import tags from '@/components/tags';
    import tagmixins from '@/mixins/tagmixins';
    import { patientindextagsconditionlistv2 } from '@/api/hqapi/tags';
    export default {
        name: 'diseases',
        components: { jgsearch, patientDetail, editPatient, copymodal, tags },
        mixins: [tagmixins],
        props: ['month_type'],
        data() {
            return {
                btnShow: [
                    {
                        name: 'patient-index-sub5',
                        flag: 'v1/patient/index/sub'
                    },
                    {
                        name: 'patient-index-edit-remark5',
                        flag: 'v1/patient/index/edit-remark'
                    },
                    {
                        name: 'v1-patient-index-update',
                        flag: 'v1/patient/index/update'
                    },
                    {
                        name: 'patient-callback-callback-common-list4',
                        flag: 'v1/patient/callback/callback-common-list'
                    },
                    {
                        name: 'patient-index-edit-tags10',
                        flag: 'v1/patient/index/edit-tags'
                    },
                    {
                        name: 'patient-index-edit-tags13',
                        flag: 'v1/patient/index/edit-tags'
                    }
                ],
                btnShows: {
                    name: 'v1-patient-index-delete4',
                    flag: 'v1/patient/index/delete'
                },
                params: {
                    month_type: '1', // 筛选月份【0默认全部、1本月、2前三月、3老数据】
                    patient_diseases_id: '', // 病种ID【2白癜风、3白斑待查】
                    patient_status_id: '', // 患者状态
                    body_parts_id: '', // 部位【多个','分割】
                    area_code: [], // 城市ID
                    tags_ids: '', // 标签IDs【多个用','分割】
                    project_tags_ids: '',
                    remark_name: '', // 微信备注
                    keywords: '', // 关键词【姓名or手机号】
                    is_attention: false, // 我的关注【1是、0否】
                    have_mobile: false, // 是否绑定手机号【0默认、1是】
                    have_wechat: false, // 是否绑定微信号【0默认、1是】
                    have_repeat: false, // 是否重复【0默认、1是】
                    belong_member_id: [], // 归属人
                    sort_appointment_time: '0', // 预到时间排序【0默认、1顺序、2倒序】
                    sort_callback_count: '0',
                    sort_last_callback_time: '0',
                    not_callback_start: '',
                    not_callback_end: '',
                    have_contact_type: '',
                    page: 1, // 页码
                    pageSize: 10 // 每页显示数量
                },
                area_code: [],
                loading: false,
                searchData: {
                    project: [
                        { id: 21, key: 'Select', transfer: true, style: { minWidth: '100px' }, placeholder: '电话微信', value: '', childList: [{ label: '只有电话', value: 1 }, { label: '只有微信', value: 2 }, { label: '无联系方式', value: 3 }, { label: '有电话有微信', value: 4 }], clearable: true, callback: 'change' },
                        { id: 1, key: 'Select', placeholder: '请选择患者状态', field: { value: 'id', label: 'status_name' }, clearable: true, value: '', childList: [], callback: 'change' },
                        { id: 2, key: 'Select', placeholder: '部位', multiple: true, maxTagCount: 3, value: [], childList: [], clearable: true, callback: 'change' },
                        { id: 3, key: 'slot', keys: 'city' },
                        { id: 5, key: 'Select', Group: true,multiple: true, placeholder: '请选择归属人', clearable: true, value: '', childList: [], callback: 'change' },
                        // { id: 30, key: 'slot', keys: 'tag' },
                        { id: 30, key: 'TreeSelect',placeholder: '请选择个人标签', multiple: true, clearable: true, style: { width: '200px' }, value: '', childList: [], callback: 'changetag' },
                        { id: 31, key: 'Select',placeholder: '请选择部门标签', multiple: true, clearable: true, style: { width: '200px' }, value: '', childList: [], callback: 'changetag' },
                        // { id: 4, key: "Selects", field: { label:'tag_name',value: 'tag_id'}, placeholder: '请先选择归属人再选择标签', clearable: true, value: [], childList: [], filterable: true, multiple: true, maxTagCount: 3, callback: 'change' },
                        { id: 6, key: 'Input', placeholder: '请输入微信备注', clearable: true, value: '', callback: 'inputwx' },
                        { id: 7, key: 'Input', placeholder: '请输入患者姓名/手机号/微信号', clearable: true, style: { width: '220px' }, value: '', callback: 'inputhz' },
                        { id: 8, key: 'slot', keys: 'check' }
                    ]
                },
                columns: [
                    { title: '基本信息', key: 'basic', slot: 'info', width: 180, fixed: 'left' },
                    { title: '患者状态', key: 'state', slot: 'state', width: 100 },
                    { title: '归属人', slot: 'realname', width: 118 },
                    { title: '预到时间', key: 'appointment_time_str', sortable: 'custom', width: 125 }, {
                        title: '回访次数',
                        key: 'callback_count',
                        sortable: 'custom',
                        width: 108
                    },
                    {
                        title: '未访天数',
                        sortable: 'custom',
                        key: 'uncallback_day',
                        filteredValue: [],
                        filters: [
                            {
                                label: '0-10天未访',
                                value: '1'
                            },
                            {
                                label: '11-20天未访',
                                value: '2'
                            },
                            {
                                label: '21-30天未访',
                                value: '3'
                            },
                            {
                                label: '31-60天未访',
                                value: '4'
                            },
                            {
                                label: '60天以上未访',
                                value: '5'
                            }
                        ],
                        filterMultiple: false,
                        filterRemote(value) {
                            this.filterType = value[0];
                        },
                        width: 118
                    },
                    { title: '城市', key: 'city_name', width: 200 },
                    { title: '部位', slot: 'body_parts', width: 260 },
                    {
                        title: '未到天数',
                        key: 'belong_assign_time_day',
                        sortable: 'custom',
                        width: 108
                    },
                    // { title: "患者主诉", key: "main_desc", width: 108, ellipsis: true, tooltip: true },
                    { title: '备注', minWidth: 250, key: 'remark', ellipsis: true, tooltip: true },
                    { title: '标签', key: 'label', slot: 'label', width: 260 },
                    { title: '微信备注', minWidth: 180, key: 'remark_name', ellipsis: true, tooltip: true },
                    { title: '操作', width: 160, slot: 'action', fixed: 'right' }
                ],
                filterType: '',
                total: 0,
                pageOpts: [10, 15, 20, 30, 50],
                list: [],
                optionscity: [],
                loadingcity: false,
                timer: null,
                member_list_list: [],
                show: true
            };
        },
        mounted() {
            this.params.patient_diseases_id = this.$route.params.id;
        },
        methods: {
            cityvalue(city) {
                this.area_code = city;
                this.params.area_code = this.area_code.join(',');
                this.params.page = 1;
                this.askData();
            },
            initial(e) {
                if(e == '1' || e == '2' || e == 3){
                    this.gettags();
                }
                if(this.show) {
                    this.show = false;
                    this.params.month_type = this.month_type;
                    patientindextabtotal({ type: 0 }).then(res => {
                        this.searchData.project.forEach(item => {
                            if(item.id === 1) {
                                for(let items of res.condition.status_list) {
                                    if(items.status_name == '预约' || items.status_name == '跟进中') {
                                        item.childList.push(items);
                                    }
                                }
                            }else if(item.id === 2) {
                                item.childList = res.condition.body_parts;
                            }else if(item.id === 4) {
                                item.childList = res.condition.tags_list;
                            }else if(item.id === 5) {
                                item.childList = res.condition.member_list;
                            }
                        });
                        this.askData();
                    });
                }
            },
            askData() {
                this.searchData.project.forEach(item => {
                    if(item.id === 1) {
                        this.params.patient_status_id = item.value;
                    }else if(item.id === 2) {
                        this.params.body_parts_id = item.value.join(',');
                    }else if(item.id === 5) {
                        this.params.belong_member_id = item.value ? item.value.join(',') : '';
                    }else if(item.id === 6) {
                        this.params.remark_name = item.value;
                    }else if(item.id === 7) {
                        this.params.keywords = item.value;
                    }else if(item.id === 21) {
                        this.params.have_contact_type = item.value;
                    }else if(item.id == 30) {
                        let list = [];
                        for(let it of item.value) {
                            list.push(it.split(',')[0]);
                        }
                        this.params.tags_ids = list.join(',');
                    }else if(item.id == 31) {
                        let list = [];
                        for(let it of item.value) {
                            list.push(it.split(',')[0]);
                        }
                        this.params.project_tags_ids = list.join(',');
                    }
                });
                let params = JSON.parse(JSON.stringify(this.params));
                params.is_attention = this.params.is_attention ? 1 : 0;
                params.have_mobile = this.params.have_mobile ? 1 : 0;
                params.have_wechat = this.params.have_wechat ? 1 : 0;
                params.have_repeat = this.params.have_repeat ? 1 : 0;
                this.loading = true;
                patientindexdiseasesuserlist(params).then(res => {
                    this.list = res.list;
                    this.total = res.total;
                    this.loading = false;
                });
            },
            gettags(){
                patientindextagsconditionlistv2().then(res => {
                    this.searchData.project.forEach(item => {
                        if(item.id == 30) {
                            item.value = '';
                            item.childList = res.self_tags;
                        }else if(item.id == 31) {
                            item.value = '';
                            item.childList = res.project_tags;
                        }
                    });
                });
            },
            changetag(){
                this.askData();
            
            },
            askDatasearchwx() {
                this.searchData.project.forEach(item => {
                    if(item.id === 1) {
                        item.value = '';
                    }else if(item.id === 2) {
                        item.value = [];
                    }else if(item.id === 4) {
                        item.value = [];
                        item.childList = [];
                    }else if(item.id === 5) {
                        item.value = [];
                    }else if(item.id === 7) {
                        item.value = '';
                    }else if(item.id === 21) {
                        item.value = '';
                    }
                });
                this.params.page = 1,
                this.params.pageSize = 10;
                this.params.area_code = [];
                this.params.is_attention = false,
                this.params.have_mobile = false,
                this.params.have_wechat = false,
                this.params.have_repeat = false,
                this.askData();
            },
            askDatasearchhz() {
                this.searchData.project.forEach(item => {
                    if(item.id === 1) {
                        item.value = '';
                    }else if(item.id === 2) {
                        item.value = [];
                    }else if(item.id === 4) {
                        item.value = [];
                    }else if(item.id === 5) {
                        item.value = '';
                    }else if(item.id === 6) {
                        item.value = '';
                    }else if(item.id === 21) {
                        item.value = '';
                    }
                });
                this.params.page = 1,
                this.params.pageSize = 10;
                this.params.area_code = [];
                this.params.is_attention = false,
                this.params.have_mobile = false,
                this.params.have_wechat = false,
                this.params.have_repeat = false,
                this.askData();
            },
            sortchange(e) {
                this.params.sort_callback_count = 0;
                this.params.sort_appointment_time = 0;
                this.params.sort_last_callback_time = 0;
                if(e.key === 'callback_count') {
                    if(e.order === 'desc') {
                        this.params.sort_callback_count = 2;
                    }else if(e.order === 'asc') {
                        this.params.sort_callback_count = 1;
                    }
                }else if(e.key === 'uncallback_day') {
                    for(let item of this.columns) {
                        if(item.title === '未访天数') {
                            item.filteredValue = [];
                        }
                    }
                    if(e.order === 'desc') {
                        this.params.sort_last_callback_time = 2;
                    }else if(e.order === 'asc') {
                        this.params.sort_last_callback_time = 1;
                    }
                }else if(e.key === 'appointment_time_str') {
                    if(e.order === 'desc') {
                        this.params.sort_appointment_time = 2;
                    }else if(e.order === 'asc') {
                        this.params.sort_appointment_time = 1;
                    }
                }else if(e.key === 'belong_assign_time_day') {
                    if(e.order === 'desc') {
                        this.params.sort_belong_assign_time = 2;
                    }else if(e.order === 'asc') {
                        this.params.sort_belong_assign_time = 1;
                    }
                }
                this.askData();
            },
            /* @函数功能: 分页 */
            changepage(e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            changepageSize(e) {
                this.params.pageSize = e;
                this.askData();
            },
            handleDetailPatient(row) {
                if(+row.patient_data_type !== 0) this.$refs.patientDetail.handleOpen(row, true);
                else this.$refs.patientDetail.handleOpen(row);
            },
            handleOpenDrawer(row) {
                if(+row.patient_data_type !== 0) this.$refs.editPatient.handleEdit(row, true);
                else this.$refs.editPatient.handleEdit(row);
            },
            copypatient(row) {
                this.$refs.copymodal.initial(row.id);
            },
            remoteMethod(query) {
                clearTimeout(this.timer);
                if(query !== '') {
                    let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
                    if(!reg.test(query)) {
                        return;
                    }
                    this.loadingcity = true;
                    return new Promise(resolve => {
                        this.timer = setTimeout(() => {
                            patientindexsearchcity({
                                keywords: query
                            }).then(res => {
                                this.query = '';
                                if(res.list && res.list.length > 0) {
                                    let list = [];
                                    for(let item of res.list) {
                                        list.push({
                                            value: item.value,
                                            label: item.label
                                        });
                                    }
                                    this.optionscity = list;
                                }
                                resolve(res.data);
                            });
                            this.loadingcity = false;
                        }, 200);
                    });
                }
            },
            delpatient(row) {
                this.$Modal.confirm({
                    title: '删除确认',
                    content: '<p>删除后患者进入回收站，将不在其他列表展示</p>',
                    loading: true,
                    onOk: () => {
                        patientindexdelete({ id: row.id }).then(() => {
                            this.$Message.info('删除成功');
                            this.askData();
                            this.$Modal.remove();
                        });
                    }
                });
            },
            handleFilterChange(value) {
                this.params.not_callback_start = '';
                this.params.not_callback_end = '';
                this.filteredValue = [];
                if(+value._filterChecked[0] === 1) {
                    this.filteredValue = ['1'];
                    this.params.not_callback_start = this.$Date().subtract(10, 'day').format('YYYY-MM-DD');
                    this.params.not_callback_end = this.$Date().format('YYYY-MM-DD');
                }else if(+value._filterChecked[0] === 2) {
                    this.filteredValue = ['2'];
                    this.params.not_callback_start = this.$Date().subtract(20, 'day').format('YYYY-MM-DD');
                    this.params.not_callback_end = this.$Date().subtract(11, 'day').format('YYYY-MM-DD');
                }else if(+value._filterChecked[0] === 3) {
                    this.filteredValue = ['3'];
                    this.params.not_callback_start = this.$Date().subtract(30, 'day').format('YYYY-MM-DD');
                    this.params.not_callback_end = this.$Date().subtract(21, 'day').format('YYYY-MM-DD');
                }else if(+value._filterChecked[0] === 4) {
                    this.filteredValue = ['4'];
                    this.params.not_callback_start = this.$Date().subtract(60, 'day').format('YYYY-MM-DD');
                    this.params.not_callback_end = this.$Date().subtract(31, 'day').format('YYYY-MM-DD');
                }else if(+value._filterChecked[0] === 5) {
                    this.filteredValue = ['5'];
                    this.params.not_callback_start = '';
                    this.params.not_callback_end = this.$Date().subtract(61, 'day').format('YYYY-MM-DD');
                }else {
                    this.params.not_callback_start = '';
                    this.params.not_callback_end = '';
                }
                for(let item of this.columns) {
                    if(item.title === '未访天数') {
                        item.filteredValue = this.filteredValue;
                    }
                }
                this.askData();
            }
        }
    };
</script>
